View
<![CDATA[
<table class="table key_navigation item_container" id="example">
<thead>
<tr>
<th style="width:20%;border-bottom:none;">Part</th>
<th style="border-bottom:none;">Description</th>
<th style="border-bottom:none;">Price</th>
<th style="border-bottom:none;">Qty</th>
<th style="border-bottom:none;">Total</th>
<th style="border-bottom:none;">ACTION</th>
</tr>
</thead>
<tbody style="min-height:250px;">
<php if(isset($salesDetails) && count($salesDetails) > 0){
foreach($salesDetails as $val){ >
<tr >
<td style="width:50%">
<div style="position:relative"><span class="clear_product">X</span> </div>
<input class="form-control autocomplete" name="product_title[]" value="{ isset( $val->product_title) ? $val->product_title : '' }">
<input type="hidden" class="sku_id" name="part_id[]" value="{ isset( $val->skus_id) ? $val->skus_id : '' }" >
</td>
<td ><input type="text" class="form-control item_description" name="description[]" value="{ isset( $val->price) ? $val->price : '' }" readonly style="text-align:right"></td>
<td ><input type="text" class="form-control item_price" name="price[]" value="{ isset( $val->price) ? $val->price : '' }" readonly style="text-align:right"></td>
<td ><input type="text" class="form-control item_quantity" name="qty[]" value="{ isset( $val->quantity) ? $val->quantity : '' }" style="text-align:right" placeholder="0.00"></td>
<td ><input type="text" class="form-control item_total" name="pricetotal[]" readonly style="text-align:right" value="{ isset( $val->item_total) ? $val->item_total : '' }"></td>
<td ><a href="javascript:void(0)" class="btn_delete" style="display:block;width:22px">x</a></td>
</tr>
<php } } >
<tr >
<td style="width:20%" >
<div style="position:relative"><span class="clear_product">X</span> </div>
<input class="form-control autocomplete " name="product_title[]">
<input type="hidden" class="sku_id" name="part_id[]">
</td>
<td ><input type="text" class="form-control item_description" name="description[]" style="text-align:right" ></td>
<td ><input type="text" class="form-control item_price" name="price[]" readonly style="text-align:right"></td>
<td ><input type="text" class="form-control item_quantity" name="qty[]" style="text-align:right" placeholder="0.00"></td>
<td ><input type="text" class="form-control item_total" name="pricetotal[]" readonly style="text-align:right"></td>
<td ><a href="javascript:void(0)" onclick="createNewRow()" class="btn_add">+</a><a href="javascript:void(0)" class="btn_delete" style="display:none">x</a></td>
</tr>
</tbody>
<tfooter>
<tr>
<td colspan="4" align="right"><b>Grand Total</b> :</td>
<td><input type="text" id="sub_total" class="form-control sub_total " readonly style="text-align:right" ></td>
</tr>
</tfooter>
</table>
]]>
CSS
<![CDATA[
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
.clear_product {
display:none;
position: absolute;
border-radius: none;
left:96.5%;
z-index: 2;
border: none;
top:5px;
cursor: pointer;
color: white;
background-color: #f21505;
transform: translateX(2px);
padding:3px;
}
.table th, .table td{
padding:1px;
}
.form-control{
border-radius:0px;
}
.table td{
border:none;
}
.btn_add{
background-color: #166e23;
padding:1px 10px;
color: white;
position:relative;
top:-2px;
font-size:28px;
font-weight:bold;
}
.btn_delete{
background-color: #f21505;
padding: 1px 12px 9px 12px;
color: white;
position:relative;
top:-2px;
font-size:22px;
font-weight:bold;
}
</style>
]]>
script
<![CDATA[
var PRODUCT_SEARCH="{route('admin.ajax.product-search')}";
$('body').on("keyup", ".autocomplete" , function() {
var length=$(this).val().length;
target=$(this);
$(this).parent().parent().find('.clear_product').hide();
if(length>0){
$(this).parent().parent().find('.clear_product').show();
}
else{
target.parent().parent().find('.sku_id').val('');
target.parent().parent().find('.item_description').val('');
target.parent().parent().find('.item_quantity').val('');
target.parent().parent().find('.item_price').val('');
target.parent().parent().find('.item_total').val(0);
updateGrandTotal();
}
});
$('body').on("click", ".clear_product" , function() {
$(this).parent().parent().find('.autocomplete').val('');
target=$(this);
target.parent().parent().parent().find('.sku_id').val('');
target.parent().parent().parent().find('.item_description').val('');
target.parent().parent().parent().find('.item_quantity').val('');
target.parent().parent().parent().find('.item_price').val('');
target.parent().parent().parent().find('.item_total').val(0);
$(this).hide();
updateGrandTotal();
});
$('body').on('focus', '.autocomplete', function (e) {
target=$(this);
$(this).autocomplete({
source: function( request, response ) {
$.ajax({
url: PRODUCT_SEARCH,
type: 'get',
dataType: "json",
data: {
search: request.term
},
headers: {
// 'X-MAC-ID': $('#mac_id').val(),
// 'X-CLIENT-KEY' : $('#client_key').val(),
// 'Authorization' : 'Bearer '+token
},
success: function( data ) {
numItems=Object.keys(data).length;
switch(numItems){
case 0:
target.val('');
target.parent().parent().find('.sku_id').val('');
target.parent().parent().find('.item_description').val('');
target.parent().parent().find('.item_quantity').val('');
target.parent().parent().find('.item_price').val('');
target.parent().parent().find('.item_total').val(0);
updateGrandTotal();
target.focus();
break;
case 1:
target.val(data[0].label);
target.parent().parent().find('.sku_id').val(data[0].sku_id);
target.parent().parent().find('.item_description').val(data[0].description);
target.parent().parent().find('.item_quantity').val('');
target.parent().parent().find('.item_quantity').focus();
break;
default:
response( data );
// response( $.map( data, function(item) {
// item_name=item.title;
// if(item.sub_title){
// item_name+=' - '+item.sub_title;
// }
// if(item.attribute){
// item_name+=' - '+item.attribute;
// }
// if(item.code){
// item_name+='( '+item.code+' )';
// }
// return {
// label:item_name,
// value:item_name
// }
// }));
break;
}
}
});
},
select: function (event, ui) {
//alert(ui.item.label);
target.val(ui.item.label); // display the selected text
target.parent().parent().find('.sku_id').val(ui.item.sku_id);
target.parent().parent().find('.item_description').val(ui.item.description);
target.parent().parent().find('.item_price').val(ui.item.price);
target.parent().parent().find('.item_quantity').val('');
target.parent().parent().find('.item_quantity').focus();
var keyCode = event.keyCode || event.which;
if (keyCode == 9) {
event.preventDefault(); // stops its action
}
return false;
},
focus: function(event, ui){},
open: function() {},
close: function(event, ui) {
},
});
});
$('body').on('blur', '.autocomplete', function (e) {
target=$(this);
if(target.parent().parent().find('.sku_id').val()==''){
target.val('');
}
});
//form save
var request_flag=0;
$('body').on('click', '.btn_save', function(event) {
var grand_total=$('.grand_total').val();
var itemCount=$('.item_total').length;
var error=0;
var error_message='';
var item_error_message='';
var customer_number=$('.phone_autocomplete').val();
var customer_name=$('.customer_name').val();
var customer_email=$('.customer_email').val();
var bill_discount_rate=$('.bill_discount_rate').val();
if(customer_number==''){
error=1;
error_message+="<li>Please enter customer mobile number</li>";
}
else{
if(!validatePhone(customer_number)) {
error=1;
error_message+="<li>Please enter valid mobile number</li>";
}
}
if(customer_name!=''){
if(!validateName(customer_name)) {
error=1;
error_message+="<li>Please enter valid name</li>";
}
}
if(customer_email!=''){
if(!validateEmail(customer_email)) {
error=1;
error_message+="<li>Please enter valid email</li>";
}
}
if(itemCount>0){
}
else{
error=1;
error_message+="<li>Please choose an item</li>";
}
if(grand_total>0){
}
else{
error=1;
error_message+="<li>Sorry, bill amount is zero.</li>";
}
$('.item_total').each(function(index, obj){
if(item_error_message==''){
sku_id=$(this).parent().parent().find('.sku_id').val();
if(obj.value>0){
}
else{
if(sku_id>0){
error=1;
error_message+="<li>Please enter the item quantity</li>";
}
}
item_price=$(this).parent().parent().find('.item_price').val();
if(item_price>0){
}
else{
if(sku_id>0){
error=1;
error_message+="<li>Please enter price</li>";
}
}
item_discount=$(this).parent().parent().find('.item_discount').val();
if(item_discount>0 && bill_discount_rate>0){
error=1;
item_error_message+="<li>Sorry, Either bill wise discount or item wise discount is applicable.</li>";
}
}
});
if(error==1){
Swal.fire({
icon: 'error',
title: '<ul style="text-align:left">'+error_message+item_error_message+'</ul>',
});
return false;
}
if(request_flag==0 && error==0){
$('#overlay1').fadeIn();
request_flag=1;
$('#frm_sale').submit();
}
});
function createNewRow(){
error=0;
$('.item_total').each(function(index, obj){
if(obj.value>0){
}
else{
sku_id=$(this).parent().parent().find('.sku_id').val();
if(sku_id==''){
error_message="Please choose an item.";
error=1;
}
if(error==0){
item_quantity=$(this).parent().parent().find('.item_quantity').val();
if(item_quantity==''){
error_message="Please enter the item quantity.";
error=1;
}
}
Swal.fire({
icon: 'error',
title: error_message,
});
}
});
if(error==0){
$('.btn_add').hide();
$('.btn_delete').show();
var str='';
str+='<tr >';
str+=' <td style="width:50%"><div style="position:relative"><span class="clear_product">X</span> </div><input class="form-control autocomplete" name="product_title[]"> <input type="hidden" class="sku_id" name="part_id[]"></td>';
str+='<td ><input type="text" class="form-control item_description" name="description[]" style="text-align:right" readonly></td>';
str+='<td ><input type="text" class="form-control item_price" name="price[]" readonly style="text-align:right"></td>';
str+='<td ><input type="text" class="form-control item_quantity" name="qty[]" style="text-align:right" placeholder="0.00"></td>';
str+='<td ><input type="text" class="form-control item_total" name="pricetotal[]" readonly style="text-align:right"></td>';
str+='<td ><a href="javascript:void(0)" onclick="createNewRow()" class="btn_add">+</a><a href="javascript:void(0)" class="btn_delete" style="display:none">x</a></td>';
str+='</tr>';
$('.item_container').append(str);
//$(this).parent().find('.item_container').append(str);
$('.autocomplete').focus();
}
}
$('body').on('keypress', '.item_quantity, .item_discount, .bill_discount_rate, .item_description, .cash_received, .phone_autocomplete', function(event) {
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
$('body').on("keyup", ".item_quantity, .item_discount, .item_price" , function() {
var target=$(this);
updateRowTotal(target);
});
$('body').on("keyup", " .bill_discount_rate" , function() {
applyCommonDiscount();
});
$('body').on("click", ".btn_delete" , function() {
$(this).parent().parent().remove();
updateGrandTotal();
});
function applyCommonDiscount(){
var sub_total=$('.sub_total').val();
var bill_discount_rate=$('.bill_discount_rate').val();
var grand_total=sub_total;
var bill_discount_amount=0;
if(bill_discount_rate>0){
bill_discount_amount=parseFloat(sub_total)*parseFloat(bill_discount_rate)/100;
grand_total=sub_total-bill_discount_amount;
}
$('.grand_total').val(parseFloat(grand_total).toFixed(2));
$('.bill_discount_total').val(bill_discount_amount.toFixed(2));
}
function updateRowTotal(target){
var item_discount=0;
var sub_total=0;
var item_total=0;
var mrp=target.parent().parent().find('.item_price').val();
var quantity=target.parent().parent().find('.item_quantity').val();
var discount=target.parent().parent().find('.item_discount').val();
if(quantity>0 && mrp>0){
var sub_total=parseFloat(mrp)*parseFloat(quantity);
}
if(discount>0){
var item_discount=sub_total*parseFloat(discount)/100;
}
item_total=sub_total-item_discount;
//target.parent().parent().find('.item_price').val(sub_total.toFixed(2));
target.parent().parent().find('.item_total').val(item_total.toFixed(2));
updateGrandTotal();
}
function updateGrandTotal(){
var grand_total=0;
var bill_discount_rate=$('.bill_discount_rate').val();
$('.item_total').each(function(index, obj){
if(obj.value>0){
grand_total=grand_total+parseFloat(obj.value);
}
});
if(grand_total>0){
}
else{
grand_total=0;
}
$('.sub_total').val(grand_total.toFixed(2));
//applyCommonDiscount();
}
$('body').on('keypress', '.item_quantity', function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
createNewRow();
}
});
$('body').on('blur', '.item_quantity', function(event) {
// createNewRow();
});
$('body').on('click', '.btn_cancel', function(event) {
var url = $(this).attr('data-url');
window.location.href =url;
});
$( ".alphabets-only" ).keypress(function(e) {
var regex = new RegExp("^[a-zA-Z ]+$");
var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
if (regex.test(str)) {
return true;
}
else
{
return false;
}
});
$( ".email" ).blur(function(e) {
email=$(this).val();
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(emailReg.test( email )){
return true;
}
else{
$(this).val('');
}
});
function validateEmail(email) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return emailReg.test( email );
}
function validateName(name) {
var nameReg = /^[a-zA-Z ]+$/;
return nameReg.test( name );
}
function validatePhone(a) {
var filter = /^((\+[1-9]{1,4}[ \-]*)|(\([0-9]{2,3}\)[ \-]*)|([0-9]{2,4})[ \-]*)*?[0-9]{3,4}?[ \-]*[0-9]{3,4}?$/;
if (filter.test(a)) {
return true;
}
else {
return false;
}
}
]]>
controller for autosuggest
<![CDATA[
public function parts_search(Request $request){
$input=$request->all();
$parts=Parts::select('id as sku_id','number as label','price','description' )
->where('status','1')
->where('number','LIKE',"%{$input['search']}%")
->get();
return response()->json(
$parts
, 200);
}
]]>
MANVIA BLOG